<template>
  <div class="userAnalysis">
    <!-- 金币付费统计卡片 -->
    <el-card shadow="hover" class="userStatisticsBox">
      <div class="userStatisticsHead">
        <h3>金币付费统计</h3>
        <div class="p">
          <p :class="{ activeA: indexA == 1 }" @click="activeAStatusA()">
            今日
          </p>
          <p :class="{ activeA: indexA == 2 }" @click="activeAStatusB()">
            总计
          </p>
        </div>
      </div>
      <!-- 今日 -->
      <div v-if="indexA == 1">
        <div class="userStatisticsItem">
          <el-card class="one">
            <h4>付费金额</h4>
            <p class="p">今日:{{ paymentAmount }}</p>
            <!-- <p>
              <span
                >环比
                <span v-if="paymentAmountRing < '0'">
                  <i class="el-icon-caret-bottom" />{{ paymentAmountRing }}
                </span>
                <span v-if="paymentAmountRing >= '0'">
                  <i class="el-icon-caret-top" />{{ paymentAmountRing }}
                </span>
              </span>
              <span
                >同比
                <span v-if="paymentAmountWith < '0'">
                  <i class="el-icon-caret-bottom" />{{ paymentAmountWith }}
                </span>
                <span v-if="paymentAmountWith >= '0'">
                  <i class="el-icon-caret-top" />{{ paymentAmountWith }}
                </span>
              </span>
            </p> -->
          </el-card>
          <el-card class="one">
            <h4>付费人数</h4>
            <p class="p">今日:{{ payer }}</p>
            <!-- <p>
              <span
                >环比
                <span v-if="payerRing < '0'">
                  <i class="el-icon-caret-bottom" />{{ payerRing }}
                </span>
                <span v-if="payerRing >= '0'">
                  <i class="el-icon-caret-top" />{{ payerRing }}
                </span>
              </span>
              <span
                >同比
                <span v-if="payerWith < '0'">
                  <i class="el-icon-caret-bottom" />{{ payerWith }}
                </span>
                <span v-if="payerWith >= '0'">
                  <i class="el-icon-caret-top" />{{ payerWith }}
                </span>
              </span>
            </p> -->
          </el-card>

          <el-card class="one">
            <h4>付费率(%)</h4>
            <p class="p">今日:{{ rate }}</p>
            <!-- <p>
              <span
                >环比
                <span v-if="rateRing < '0'">
                  <i class="el-icon-caret-bottom" />{{ rateRing }}
                </span>
                <span v-if="rateRing >= '0'">
                  <i class="el-icon-caret-top" />{{ rateRing }}
                </span>
              </span>
              <span
                >同比
                <span v-if="rateWith < '0'">
                  <i class="el-icon-caret-bottom" />{{ rateWith }}
                </span>
                <span v-if="rateWith >= '0'">
                  <i class="el-icon-caret-top" />{{ rateWith }}
                </span>
              </span>
            </p> -->
          </el-card>
          <el-card class="one hilden">
            <!-- <h4>新增付费</h4>
            <p class="p">今日:{{ addRechargeMoney }}</p>
            <p>
              <span
                >环比
                <span v-if="addRechargeMoneyRing < '0'">
                  <i class="el-icon-caret-bottom" />{{ addRechargeMoneyRing }}
                </span>
                <span v-if="addRechargeMoneyRing >= '0'">
                  <i class="el-icon-caret-top" />{{ addRechargeMoneyRing }}
                </span>
              </span>
              <span
                >同比
                <span v-if="addRechargeMoneyWith < '0'">
                  <i class="el-icon-caret-bottom" />{{ addRechargeMoneyWith }}
                </span>
                <span v-if="addRechargeMoneyWith >= '0'">
                  <i class="el-icon-caret-top" />{{ addRechargeMoneyWith }}
                </span>
              </span>
            </p> -->
            <!-- <h4>新增付费人数</h4>
            <p class="p">今日:{{ addRechargeUserNum }}</p>
            <p>
              <span
                >环比
                <span v-if="addRechargeUserNumRing < '0'">
                  <i class="el-icon-caret-bottom" />{{ addRechargeUserNumRing }}
                </span>
                <span v-if="addRechargeUserNumRing >= '0'">
                  <i class="el-icon-caret-top" />{{ addRechargeUserNumRing }}
                </span>
              </span>
              <span
                >同比
                <span v-if="addRechargeUserNumWith < '0'">
                  <i class="el-icon-caret-bottom" />{{ addRechargeUserNumWith }}
                </span>
                <span v-if="addRechargeUserNumWith >= '0'">
                  <i class="el-icon-caret-top" />{{ addRechargeUserNumWith }}
                </span>
              </span>
            </p>-->
          </el-card>
        </div>

        <div class="userStatisticsItem">
          <el-card class="one">
            <h4>点击充值人数</h4>
            <p class="p">今日:{{ clickRechargeUserNum }}</p>
            <!-- <p>
              <span
                >环比
                <span v-if="clickRechargeUserNumRing < '0'">
                  <i class="el-icon-caret-bottom" />{{
                    clickRechargeUserNumRing
                  }}
                </span>
                <span v-if="clickRechargeUserNumRing >= '0'">
                  <i class="el-icon-caret-top" />{{ clickRechargeUserNumRing }}
                </span>
              </span>
              <span
                >同比
                <span v-if="clickRechargeUserNumWith < '0'">
                  <i class="el-icon-caret-bottom" />{{
                    clickRechargeUserNumWith
                  }}
                </span>
                <span v-if="clickRechargeUserNumWith >= '0'">
                  <i class="el-icon-caret-top" />{{ clickRechargeUserNumWith }}
                </span>
              </span>
            </p> -->
          </el-card>
          <el-card class="one">
            <h4>点击充值次数</h4>
            <p class="p">今日:{{ clickRechargeNum }}</p>
            <!-- <p>
              <span
                >环比
                <span v-if="clickRechargeNumRing < '0'">
                  <i class="el-icon-caret-bottom" />{{ clickRechargeNumRing }}
                </span>
                <span v-if="clickRechargeNumRing >= '0'">
                  <i class="el-icon-caret-top" />{{ clickRechargeNumRing }}
                </span>
              </span>
              <span
                >同比
                <span v-if="clickRechargeNumWith < '0'">
                  <i class="el-icon-caret-bottom" />{{ clickRechargeNumWith }}
                </span>
                <span v-if="clickRechargeNumWith >= '0'">
                  <i class="el-icon-caret-top" />{{ clickRechargeNumWith }}
                </span>
              </span>
            </p> -->
          </el-card>
          <el-card class="one">
            <h4>充值率</h4>
            <p class="p">今日:{{ rechargeTwoRate }}</p>
            <!-- <p>
              <span
                >环比
                <span v-if="rechargeTwoRateRing < '0'">
                  <i class="el-icon-caret-bottom" />{{ rechargeTwoRateRing }}
                </span>
                <span v-if="rechargeTwoRateRing >= '0'">
                  <i class="el-icon-caret-top" />{{ rechargeTwoRateRing }}
                </span>
              </span>
              <span
                >同比
                <span v-if="rechargeTwoRateWith < '0'">
                  <i class="el-icon-caret-bottom" />{{ rechargeTwoRateWith }}
                </span>
                <span v-if="rechargeTwoRateWith >= '0'">
                  <i class="el-icon-caret-top" />{{ rechargeTwoRateWith }}
                </span>
              </span>
            </p> -->
          </el-card>
          <el-card class="one hilden">
            <h4>新增付费人数</h4>
            <p class="p">今日:{{ addRechargeUserNum }}</p>
            <!-- <p>
              <span
                >环比
                <span v-if="addRechargeUserNumRing < '0'">
                  <i class="el-icon-caret-bottom" />{{ addRechargeUserNumRing }}
                </span>
                <span v-if="addRechargeUserNumRing >= '0'">
                  <i class="el-icon-caret-top" />{{ addRechargeUserNumRing }}
                </span>
              </span>
              <span
                >同比
                <span v-if="addRechargeUserNumWith < '0'">
                  <i class="el-icon-caret-bottom" />{{ addRechargeUserNumWith }}
                </span>
                <span v-if="addRechargeUserNumWith >= '0'">
                  <i class="el-icon-caret-top" />{{ addRechargeUserNumWith }}
                </span>
              </span>
            </p> -->
          </el-card>
        </div>
      </div>
      <!-- 总计 -->
      <div v-if="indexA == 2">
        <div class="userStatisticsItem">
          <el-card class="one">
            <h4>付费金额</h4>
            <p class="p">总计:{{ paymentAmount }}</p>
          </el-card>
          <el-card class="one">
            <h4>付费人数</h4>
            <p class="p">总计:{{ payer }}</p>
          </el-card>
          <!-- <el-card class="one">
            <h4>首充人数</h4>
            <p class="p">总计:{{ firstCharge }}</p>
          </el-card> -->
          <el-card class="one">
            <h4>付费率(%)</h4>
            <p class="p">总计:{{ rate }}</p>
          </el-card>
        </div>
        <!-- <div class="userStatisticsItem">
          <el-card class="one">
            <h4>点击充值人数</h4>
            <p class="p">总计:{{ paymentAmount }}</p>
          </el-card>
          <el-card class="one">
            <h4>点击充值次数</h4>
            <p class="p">总计:{{ payer }}</p>
          </el-card>
          <el-card class="one">
            <h4>充值率</h4>
            <p class="p">总计:{{ firstCharge }}</p>
          </el-card>
          <el-card class="one">
            <h4>新增付费人数</h4>
            <p class="p">总计:{{ rate }}</p>
          </el-card>
        </div> -->
      </div>

      <div class="searchBox">
        <h3>LTV</h3>
        <div>
          <!-- <el-select v-model="ltvVal" placeholder="请选择LTV统计渠道">
            <el-option
              v-for="item in ltvOptions"
              :key="item.en_name"
              :label="item.cn_name"
              :value="item.en_name"
            >
            </el-option>
          </el-select> -->
          <el-date-picker
            v-model="ltvTimeVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="ltvPickerOptions"
            value-format="yyyy-MM-dd"
            @change="focusB"
          >
          </el-date-picker>
          <el-button
            class="btn"
            icon="el-icon-search"
            @click="chartPaymentStatisticsLtvBtn"
            >查询搜索</el-button
          >
          <!-- <el-button round class="btn" icon="el-icon-download"
            >导出Excel</el-button
          > -->
        </div>
      </div>
      <div class="userStatisticsItem">
        <el-card class="one">
          <h4>LTV</h4>
          <p class="p">{{ ltv + "元" }}</p>
          <p>{{ dateLtv }}</p>
        </el-card>
      </div>

      <!-- <div class="searchBox">
        <div class="p">
          <p :class="{ active: index == 1 }" @click="activeStatusA()">充值率</p>
          <p :class="{ active: index == 2 }" @click="activeStatusB()">
            充值金额
          </p>
          <p :class="{ active: index == 3 }" @click="activeStatusC()">
            充值人数
          </p>
        </div>

        <div>
          <el-date-picker
            v-model="value2"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
          <el-button type="primary" round>搜索</el-button>
        </div>
      </div>
      <div id="myChart" :style="{ width: '100%', height: '500px' }"></div> -->

      <!-- 付费统计详情 -->
      <div class="searchBox">
        <div>
          <h3>付费统计详情</h3>
        </div>
        <div>
          <!-- <span style="color: #9d9fa8; margin-right: 10px">请选择渠道</span>
          <el-select v-model="payVal" placeholder="请选择付费统计渠道">
            <el-option
              v-for="item in payOptions"
              :key="item.en_name"
              :label="item.cn_name"
              :value="item.en_name"
            >
            </el-option>
          </el-select> -->
          <el-date-picker
            v-model="payTimeVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="payPickerOptions"
            value-format="yyyy-MM-dd"
            @change="focusA"
          >
          </el-date-picker>
          <el-button
            class="btn"
            icon="el-icon-search"
            @click="chartPaymentStatisticsCardBtn"
            >查询搜索</el-button
          >
          <el-button class="btn" icon="el-icon-download" @click="exportExcel"
            >导出Excel</el-button
          >
        </div>
      </div>
      <el-table
        :data="tableDataA"
        v-loading="loadingA"
        style="width: 100%"
        height="600px"
      >
        <el-table-column prop="date" label="日期" align="center">
        </el-table-column>
        <el-table-column prop="totalMoney" label="付费金额" align="center">
        </el-table-column>
        <el-table-column
          prop="rechargePersonNum"
          label="付费人数"
          align="center"
        >
        </el-table-column>

        <el-table-column
          prop="clickRechargeUserNum"
          label="点击充值人数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="clickRechargeNum"
          label="点击充值次数"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="rechargeTwoRate" label="充值率" align="center">
        </el-table-column>

        <!-- <el-table-column prop="addRechargeMoney" label="新增用户付费">
        </el-table-column> -->
        <!-- <el-table-column
          prop="addRechargeUserNum"
          label="新增用户付费人数"
          align="center"
        >
        </el-table-column> -->
        <!-- <el-table-column prop="firstChargeNum" label="首充人数" width="180">
        </el-table-column> -->
        <el-table-column prop="rechargeARPU" label="ARPU" align="center">
        </el-table-column>
        <el-table-column prop="rechargeARPPU" label="ARPPU" align="center">
        </el-table-column>
        <el-table-column prop="rechargeRate" label="付费率" align="center">
        </el-table-column>
      </el-table>
      <pagination
        v-show="totalA > 0"
        :total="totalA"
        :page.sync="pageA"
        :limit.sync="pageSizeA"
        @pagination="getListA"
      />

      <!-- 首次付费人数 -->
      <div class="searchBox">
        <div>
          <h3>首次付费人数</h3>
        </div>
        <div>
          <!-- <span style="color: #9d9fa8; margin-right: 10px">请选择渠道</span>
          <el-select
            v-model="lnitialPaymentVal"
            placeholder="请选择付费统计渠道"
          >
            <el-option
              v-for="item in lnitialPaymentOptions"
              :key="item.en_name"
              :label="item.cn_name"
              :value="item.en_name"
            >
            </el-option>
          </el-select> -->
          <el-date-picker
            v-model="lnitialPaymentTimeVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="lnitialPaymentPickerOptions"
            value-format="yyyy-MM-dd"
            @change="focusF"
          >
          </el-date-picker>
          <el-button
            class="btn"
            icon="el-icon-search"
            @click="lnitialPaymentBtn"
            >查询搜索</el-button
          >
          <el-button class="btn" icon="el-icon-download" @click="exportExcelD"
            >导出Excel</el-button
          >
        </div>
      </div>
      <el-table
        :data="lnitialPaymentTableData"
        v-loading="lnitialPaymentLoading"
        style="width: 100%"
      >
        <el-table-column prop="date" label="日期" width="150" align="center">
        </el-table-column>
        <el-table-column prop="r1" label="当日" width="150" align="center">
        </el-table-column>
        <el-table-column prop="r2" label="次日" width="150" align="center">
        </el-table-column>
        <el-table-column prop="r3" label="3日" width="150" align="center">
        </el-table-column>
        <el-table-column prop="r4" label="4日" width="150" align="center">
        </el-table-column>
        <el-table-column prop="r5" label="5日" width="150" align="center">
        </el-table-column>
        <el-table-column prop="r6" label="6日" width="150" align="center">
        </el-table-column>
        <el-table-column prop="r7" label="7日" width="150" align="center">
        </el-table-column>
        <el-table-column prop="r8" label="15日" width="150" align="center">
        </el-table-column>
        <el-table-column prop="r9" label="30日" width="150" align="center">
        </el-table-column>
        <el-table-column prop="r10" label="30日后" align="center">
        </el-table-column>
      </el-table>
      <pagination
        v-show="totalC > 0"
        :total="totalC"
        :page.sync="pageC"
        :limit.sync="pageSizeC"
        @pagination="getListc"
      />
    </el-card>

    <!-- VIP付费统计卡片 -->
    <el-card shadow="hover" class="userStatisticsBox">
      <div class="userStatisticsHead">
        <h3>VIP付费统计</h3>
        <div class="p">
          <p :class="{ activeA: indexC == 1 }" @click="activeBStatusA()">
            今日
          </p>
          <p :class="{ activeA: indexC == 2 }" @click="activeBStatusB()">
            总计
          </p>
        </div>
      </div>
      <!-- 今日 -->
      <div v-if="indexC == 1">
        <div class="userStatisticsItem">
          <el-card class="one">
            <h4>付费金额</h4>
            <p class="p">今日:{{ paymentAmountB }}</p>
            <!-- <p>
              <span
                >环比
                <span v-if="paymentAmountRingB < '0'">
                  <i class="el-icon-caret-bottom" />{{ paymentAmountRingB }}
                </span>
                <span v-if="paymentAmountRing >= '0'">
                  <i class="el-icon-caret-top" />{{ paymentAmountRingB }}
                </span>
              </span>
              <span
                >同比
                <span v-if="paymentAmountWithB < '0'">
                  <i class="el-icon-caret-bottom" />{{ paymentAmountWithB }}
                </span>
                <span v-if="paymentAmountWithB >= '0'">
                  <i class="el-icon-caret-top" />{{ paymentAmountWithB }}
                </span>
              </span>
            </p> -->
          </el-card>
          <el-card class="one">
            <h4>付费人数</h4>
            <p class="p">今日:{{ payerB }}</p>
            <!-- <p>
              <span
                >环比
                <span v-if="payerRingB < '0'">
                  <i class="el-icon-caret-bottom" />{{ payerRingB }}
                </span>
                <span v-if="payerRingB >= '0'">
                  <i class="el-icon-caret-top" />{{ payerRingB }}
                </span>
              </span>
              <span
                >同比
                <span v-if="payerWithB < '0'">
                  <i class="el-icon-caret-bottom" />{{ payerWithB }}
                </span>
                <span v-if="payerWithB >= '0'">
                  <i class="el-icon-caret-top" />{{ payerWithB }}
                </span>
              </span>
            </p> -->
          </el-card>

          <el-card class="one">
            <h4>付费率(%)</h4>
            <p class="p">今日:{{ rateB }}</p>
            <!-- <p>
              <span
                >环比
                <span v-if="rateRingB < '0'">
                  <i class="el-icon-caret-bottom" />{{ rateRingB }}
                </span>
                <span v-if="rateRingB >= '0'">
                  <i class="el-icon-caret-top" />{{ rateRingB }}
                </span>
              </span>
              <span
                >同比
                <span v-if="rateWithB < '0'">
                  <i class="el-icon-caret-bottom" />{{ rateWithB }}
                </span>
                <span v-if="rateWithB >= '0'">
                  <i class="el-icon-caret-top" />{{ rateWithB }}
                </span>
              </span>
            </p> -->
          </el-card>
          <el-card class="one hilden">
            <!-- <h4>新增付费</h4>
            <p class="p">今日:{{ addRechargeMoneyB }}</p>
            <p>
              <span
                >环比
                <span v-if="addRechargeMoneyRingB < '0'">
                  <i class="el-icon-caret-bottom" />{{ addRechargeMoneyRingB }}
                </span>
                <span v-if="addRechargeMoneyRingB >= '0'">
                  <i class="el-icon-caret-top" />{{ addRechargeMoneyRingB }}
                </span>
              </span>
              <span
                >同比
                <span v-if="addRechargeMoneyWithB < '0'">
                  <i class="el-icon-caret-bottom" />{{ addRechargeMoneyWithB }}
                </span>
                <span v-if="addRechargeMoneyWithB >= '0'">
                  <i class="el-icon-caret-top" />{{ addRechargeMoneyWithB }}
                </span>
              </span>
            </p> -->
          </el-card>
        </div>

        <div class="userStatisticsItem">
          <el-card class="one">
            <h4>点击充值人数</h4>
            <p class="p">今日:{{ clickRechargeUserNumB }}</p>
            <!-- <p>
              <span
                >环比
                <span v-if="clickRechargeUserNumRingB < '0'">
                  <i class="el-icon-caret-bottom" />{{
                    clickRechargeUserNumRingB
                  }}
                </span>
                <span v-if="clickRechargeUserNumRingB >= '0'">
                  <i class="el-icon-caret-top" />{{ clickRechargeUserNumRingB }}
                </span>
              </span>
              <span
                >同比
                <span v-if="clickRechargeUserNumWithB < '0'">
                  <i class="el-icon-caret-bottom" />{{
                    clickRechargeUserNumWithB
                  }}
                </span>
                <span v-if="clickRechargeUserNumWithB >= '0'">
                  <i class="el-icon-caret-top" />{{ clickRechargeUserNumWithB }}
                </span>
              </span>
            </p> -->
          </el-card>
          <el-card class="one">
            <h4>点击充值次数</h4>
            <p class="p">今日:{{ clickRechargeNumB }}</p>
            <!-- <p>
              <span
                >环比
                <span v-if="clickRechargeNumRingB < '0'">
                  <i class="el-icon-caret-bottom" />{{ clickRechargeNumRingB }}
                </span>
                <span v-if="clickRechargeNumRingB >= '0'">
                  <i class="el-icon-caret-top" />{{ clickRechargeNumRingB }}
                </span>
              </span>
              <span
                >同比
                <span v-if="clickRechargeNumWithB < '0'">
                  <i class="el-icon-caret-bottom" />{{ clickRechargeNumWithB }}
                </span>
                <span v-if="clickRechargeNumWithB >= '0'">
                  <i class="el-icon-caret-top" />{{ clickRechargeNumWithB }}
                </span>
              </span>
            </p> -->
          </el-card>
          <el-card class="one">
            <h4>充值率</h4>
            <p class="p">今日:{{ rechargeTwoRateB }}</p>
            <!-- <p>
              <span
                >环比
                <span v-if="rechargeTwoRateRingB < '0'">
                  <i class="el-icon-caret-bottom" />{{ rechargeTwoRateRingB }}
                </span>
                <span v-if="rechargeTwoRateRingB >= '0'">
                  <i class="el-icon-caret-top" />{{ rechargeTwoRateRingB }}
                </span>
              </span>
              <span
                >同比
                <span v-if="rechargeTwoRateWithB < '0'">
                  <i class="el-icon-caret-bottom" />{{ rechargeTwoRateWithB }}
                </span>
                <span v-if="rechargeTwoRateWithB >= '0'">
                  <i class="el-icon-caret-top" />{{ rechargeTwoRateWithB }}
                </span>
              </span>
            </p> -->
          </el-card>
          <el-card class="one hilden">
            <h4>新增付费人数</h4>
            <p class="p">今日:{{ addRechargeUserNumB }}</p>
            <!-- <p>
              <span
                >环比
                <span v-if="addRechargeUserNumRingB < '0'">
                  <i class="el-icon-caret-bottom" />{{
                    addRechargeUserNumRingB
                  }}
                </span>
                <span v-if="addRechargeUserNumRingB >= '0'">
                  <i class="el-icon-caret-top" />{{ addRechargeUserNumRingB }}
                </span>
              </span>
              <span
                >同比
                <span v-if="addRechargeUserNumWithB < '0'">
                  <i class="el-icon-caret-bottom" />{{
                    addRechargeUserNumWithB
                  }}
                </span>
                <span v-if="addRechargeUserNumWithB >= '0'">
                  <i class="el-icon-caret-top" />{{ addRechargeUserNumWithB }}
                </span>
              </span>
            </p> -->
          </el-card>
        </div>
      </div>
      <!-- 总计 -->
      <div v-if="indexC == 2">
        <div class="userStatisticsItem">
          <el-card class="one">
            <h4>付费金额</h4>
            <p class="p">总计:{{ paymentAmountB }}</p>
          </el-card>
          <el-card class="one">
            <h4>付费人数</h4>
            <p class="p">总计:{{ payerB }}</p>
          </el-card>
          <!-- <el-card class="one">
            <h4>首充人数</h4>
            <p class="p">总计:{{ firstChargeB }}</p>
          </el-card> -->
          <el-card class="one">
            <h4>付费率(%)</h4>
            <p class="p">总计:{{ rateB }}</p>
          </el-card>
        </div>
        <!-- <div class="userStatisticsItem">
          <el-card class="one">
            <h4>点击充值人数</h4>
            <p class="p">总计:{{ paymentAmount }}</p>
          </el-card>
          <el-card class="one">
            <h4>点击充值次数</h4>
            <p class="p">总计:{{ payer }}</p>
          </el-card>
          <el-card class="one">
            <h4>充值率</h4>
            <p class="p">总计:{{ firstCharge }}</p>
          </el-card>
          <el-card class="one">
            <h4>新增付费人数</h4>
            <p class="p">总计:{{ rate }}</p>
          </el-card>
        </div> -->
      </div>
      <div class="searchBox">
        <div>
          <h3>VIP付费统计详情</h3>
        </div>
        <div>
          <!-- <span style="color: #9d9fa8; margin-right: 10px">请选择渠道</span>
          <el-select v-model="payValVip" placeholder="请选择付费统计渠道">
            <el-option
              v-for="item in payOptionsVip"
              :key="item.en_name"
              :label="item.cn_name"
              :value="item.en_name"
            >
            </el-option>
          </el-select> -->
          <el-date-picker
            v-model="payTimeValVip"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="payPickerOptionsVip"
            value-format="yyyy-MM-dd"
            @change="focusVip"
          >
          </el-date-picker>
          <el-button
            class="btn"
            icon="el-icon-search"
            @click="chartPaymentStatisticsCardVipBtn"
            >查询搜索</el-button
          >
          <el-button class="btn" icon="el-icon-download" @click="exportExcelVIP"
            >导出Excel</el-button
          >
        </div>
      </div>
      <el-table
        :data="tableDataAVip"
        v-loading="loadingAVip"
        style="width: 100%"
      >
        <el-table-column prop="date" label="日期" align="center">
        </el-table-column>
        <el-table-column prop="totalMoney" label="付费金额" align="center">
        </el-table-column>
        <el-table-column
          prop="rechargePersonNum"
          label="付费人数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="clickRechargeUserNum"
          label="点击充值人数"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="clickRechargeNum"
          label="点击充值次数"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="rechargeTwoRate" label="充值率" align="center">
        </el-table-column>
        <!-- <el-table-column
          prop="addRechargeMoney"
          label="新增用户付费"
          width="180"
        >
        </el-table-column> -->
        <!-- <el-table-column
          prop="addRechargeUserNum"
          label="新增用户付费人数"
          width="180"
          align="center"
        >
        </el-table-column> -->
        <el-table-column prop="rechargeRate" label="付费率" align="center">
        </el-table-column>
      </el-table>
      <pagination
        v-show="totalVip > 0"
        :total="totalVip"
        :page.sync="pageVip"
        :limit.sync="pageSizeVip"
        @pagination="getListVip"
      />
    </el-card>

    <!-- 提现统计卡片 -->
    <el-card shadow="hover" class="userStatisticsBox">
      <div class="userStatisticsHead">
        <h3>提现统计</h3>
        <div class="p">
          <p
            :class="{ activeA: WithdrawalActiveA == 1 }"
            @click="WithdrawalActive(1)"
          >
            当日
          </p>
          <p
            :class="{ activeA: WithdrawalActiveA == 2 }"
            @click="WithdrawalActive(2)"
          >
            当月
          </p>
          <p
            :class="{ activeA: WithdrawalActiveA == 3 }"
            @click="WithdrawalActive(3)"
          >
            总计
          </p>
        </div>
      </div>
      <div class="userStatisticsItem">
        <el-card class="one">
          <h4>提现金额</h4>
          <p class="p">今日:{{ withdrawalAmount }}</p>
          <!-- <p>
            <span>
              环比
              <span v-if="withdrawalAmountRing < '0'">
                <i class="el-icon-caret-bottom">{{
                  withdrawalAmountRing | numFilter
                }}</i>
              </span>
              <span v-if="withdrawalAmountRing > '0'">
                <i class="el-icon-caret-top">{{
                  withdrawalAmountRing | numFilter
                }}</i>
              </span>
            </span>
            <span>
              同比
              <span v-if="withdrawalAmountWith < '0'">
                <i class="el-icon-caret-bottom">{{
                  withdrawalAmountWith | numFilter
                }}</i>
              </span>
              <span v-if="withdrawalAmountWith > '0'">
                <i class="el-icon-caret-top">{{
                  withdrawalAmountWith | numFilter
                }}</i>
              </span>
            </span>
          </p> -->
          <!-- <div>
            <p>
              环比<i class="el-icon-caret-bottom" />{{ withdrawalAmountRing }}
            </p>
            <p>同比<i class="el-icon-caret-top" />{{ withdrawalAmountWith }}</p>
          </div> -->
        </el-card>
        <el-card class="one">
          <h4>提现人数</h4>
          <p class="p">今日:{{ withdrawerNum }}</p>
          <!-- <p>
            <span>
              环比
              <span v-if="withdrawerNumRing < '0'">
                <i class="el-icon-caret-bottom">{{
                  withdrawerNumRing | numFilter
                }}</i>
              </span>
              <span v-if="withdrawerNumRing > '0'">
                <i class="el-icon-caret-top">{{
                  withdrawerNumRing | numFilter
                }}</i>
              </span>
            </span>
            <span>
              同比
              <span v-if="withdrawerNumWith < '0'">
                <i class="el-icon-caret-bottom">{{
                  withdrawerNumWith | numFilter
                }}</i>
              </span>
              <span v-if="withdrawerNumWith > '0'">
                <i class="el-icon-caret-top">{{
                  withdrawerNumWith | numFilter
                }}</i>
              </span>
            </span>
          </p> -->
          <!-- <div>
            <p>环比<i class="el-icon-caret-bottom" />{{ withdrawerNumRing }}</p>
            <p>同比<i class="el-icon-caret-top" />{{ withdrawerNumWith }}</p>
          </div> -->
        </el-card>
        <el-card class="one">
          <h4>提现率</h4>
          <p class="p">今日:{{ withdrawalRate + "%" }}</p>
          <!-- <p>
            <span>
              环比
              <span v-if="withdrawalRateRing < '0'">
                <i class="el-icon-caret-bottom">{{
                  withdrawalRateRing | numFilter
                }}</i>
              </span>
              <span v-if="withdrawalRateRing > '0'">
                <i class="el-icon-caret-top">{{
                  withdrawalRateRing | numFilter
                }}</i>
              </span>
            </span>
            <span>
              同比
              <span v-if="withdrawalRateWith < '0'">
                <i class="el-icon-caret-bottom">{{
                  withdrawalRateWith | numFilter
                }}</i>
              </span>
              <span v-if="withdrawalRateWith > '0'">
                <i class="el-icon-caret-top">{{
                  withdrawalRateWith | numFilter
                }}</i>
              </span>
            </span>
          </p> -->
          <!-- <div>
            <p>
              环比<i class="el-icon-caret-bottom" />{{ withdrawalRateRing }}
            </p>
            <p>同比<i class="el-icon-caret-top" />{{ withdrawalRateWith }}</p>
          </div> -->
        </el-card>
        <el-card class="one">
          <h4>首提人数</h4>
          <p class="p">今日:{{ firstMentionedNum }}</p>
          <!-- <p>
            <span>
              环比
              <span v-if="firstMentionedNumRing < '0'">
                <i class="el-icon-caret-bottom">{{
                  firstMentionedNumRing | numFilter
                }}</i>
              </span>
              <span v-if="firstMentionedNumRing > '0'">
                <i class="el-icon-caret-top">{{
                  firstMentionedNumRing | numFilter
                }}</i>
              </span>
            </span>
            <span>
              同比
              <span v-if="firstMentionedNumWith < '0'">
                <i class="el-icon-caret-bottom">{{
                  firstMentionedNumWith | numFilter
                }}</i>
              </span>
              <span v-if="firstMentionedNumWith > '0'">
                <i class="el-icon-caret-top">{{
                  firstMentionedNumWith | numFilter
                }}</i>
              </span>
            </span>
          </p> -->
          <!-- <div>
            <p>
              环比<i class="el-icon-caret-bottom" />{{ firstMentionedNumRing }}
            </p>
            <p>
              同比<i class="el-icon-caret-top" />{{ firstMentionedNumWith }}
            </p>
          </div> -->
        </el-card>
      </div>
      <div class="searchBox">
        <div class="p">
          <p :class="{ active: indexB == 1 }" @click="activeStatusD()">
            提现率
          </p>
          <p :class="{ active: indexB == 2 }" @click="activeStatusE()">
            提现金额
          </p>
          <p :class="{ active: indexB == 3 }" @click="activeStatusF()">
            提现人数
          </p>
        </div>

        <div>
          <!-- <el-select v-model="withdrawalVal" placeholder="请选择提现统计渠道">
            <el-option
              v-for="item in withdrawalOptions"
              :key="item.en_name"
              :label="item.cn_name"
              :value="item.en_name"
            >
            </el-option>
          </el-select> -->
          <el-date-picker
            v-model="withdrawalTimeVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="withdrawalPickerOptions"
            value-format="yyyy-MM-dd"
            @change="focusD"
          >
          </el-date-picker>
          <el-button
            class="btn"
            icon="el-icon-search"
            @click="chartWithdrawLineChartBtn"
            >查询搜索</el-button
          >
          <el-button class="btn" icon="el-icon-download" @click="exportExcelB"
            >导出Excel</el-button
          >
        </div>
      </div>
      <div id="myChartB" :style="{ width: '100%', height: '500px' }"></div>

      <div class="searchBox">
        <div>
          <h3>提现统计详情</h3>
        </div>

        <div>
          <!-- <el-select
            v-model="withdrawalListVal"
            placeholder="请选择提现统计渠道"
          >
            <el-option
              v-for="item in withdrawalListOptions"
              :key="item.en_name"
              :label="item.cn_name"
              :value="item.en_name"
            >
            </el-option>
          </el-select> -->
          <!-- <span style="color: #9d9fa8; margin-right: 10px">请选择渠道</span>
          <el-select
            v-model="withdrawalListVal"
            placeholder="请选择付费统计渠道"
          >
            <el-option
              v-for="item in payOptions"
              :key="item.en_name"
              :label="item.cn_name"
              :value="item.en_name"
            >
            </el-option>
          </el-select> -->
          <el-date-picker
            v-model="withdrawalTimeListVal"
            type="daterange"
            align="right"
            unlink-panels
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="withdrawalListPickerOptions"
            value-format="yyyy-MM-dd"
            @change="focusE"
          >
          </el-date-picker>
          <el-button
            class="btn"
            icon="el-icon-search"
            @click="chartWithdrawDetailsBtn"
            >查询搜索</el-button
          >
          <el-button class="btn" icon="el-icon-download" @click="exportExcelC"
            >导出Excel</el-button
          >
        </div>
      </div>
      <el-table
        :data="tableDataB"
        v-loading="loadingB"
        style="width: 100%"
        height="400px"
      >
        <el-table-column prop="date" label="时间" align="center">
        </el-table-column>
        <el-table-column prop="totalMoney" label="总金额" align="center">
        </el-table-column>
        <el-table-column
          prop="totalDiamond"
          label="总数量(宝石)"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="withdrawPersonNum" label="人数" align="center">
        </el-table-column>
        <!-- <el-table-column prop="withdrawCount" label="次数"> </el-table-column> -->
        <el-table-column prop="withdrawRate" label="提现率" align="center">
        </el-table-column>
      </el-table>
      <!-- <pagination
        v-show="totalB > 0"
        :total="totalB"
        :page.sync="pageB"
        :limit.sync="pageSizeB"
        @pagination="getListB"
      /> -->
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import {
  chartRechargeLineChart,
  chartRechargeDetail,
  chartWithdrawDetail,
  chartWithdrawLineChart,
  chartPaymentStatisticsCard,
  chartPaymentStatisticsLtv,
  chartWithdrawDetails,
  channelList,
  chartRechargeStatisticsDetail,
  chartRechargeStatistics,
  chartRechargeUserFirstRechargeRetention,
} from "@/api/DataManagement";

export default {
  components: { Pagination },
  data() {
    return {
      WithdrawalActiveA: 3,
      //付费统计
      loadingA: true,
      loadingB: true,
      loadingAVip: true,
      lnitialPaymentLoading: true,
      paymentAmount: "",
      paymentAmountRing: "",
      paymentAmountWith: "",
      payer: "",
      payerRing: "",
      payerWith: "",
      firstCharge: "",
      firstChargeRing: "",
      firstChargeWith: "",
      rate: "",
      rateRing: "",
      rateWith: "",

      addRechargeMoney: "",
      addRechargeMoneyRing: "",
      addRechargeMoneyWith: "",
      addRechargeUserNum: "",
      addRechargeUserNumRing: "",
      addRechargeUserNumWith: "",
      clickRechargeUserNum: "",
      clickRechargeUserNumRing: "",
      clickRechargeUserNumWith: "",
      clickRechargeNum: "",
      clickRechargeNumRing: "",
      clickRechargeNumWith: "",
      rechargeTwoRate: "",
      rechargeTwoRateRing: "",
      rechargeTwoRateWith: "",

      paymentAmountB: "",
      paymentAmountRingB: "",
      paymentAmountWithB: "",
      payerB: "",
      payerRingB: "",
      payerWithB: "",
      firstChargeB: "",
      firstChargeRingB: "",
      firstChargeWithB: "",
      rateB: "",
      rateRingB: "",
      rateWithB: "",

      addRechargeMoneyB: "",
      addRechargeMoneyRingB: "",
      addRechargeMoneyWithB: "",
      addRechargeUserNumB: "",
      addRechargeUserNumRingB: "",
      addRechargeUserNumWithB: "",
      clickRechargeUserNumB: "",
      clickRechargeUserNumRingB: "",
      clickRechargeUserNumWithB: "",
      clickRechargeNumB: "",
      clickRechargeNumRingB: "",
      clickRechargeNumWithB: "",
      rechargeTwoRateB: "",
      rechargeTwoRateRingB: "",
      rechargeTwoRateWithB: "",

      payPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      payTimeValStartDate: "",
      payTimeValEndDate: "",
      payTimeVal: "", //付费统计时间筛选
      payOptions: [
        {
          value: "1",
          label: "官网",
        },
      ],
      payVal: "", //付费统计渠道

      //首次付费人数
      lnitialPaymentTableData: [],
      lnitialPaymentPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      lnitialPaymentTimeValStartDate: "",
      lnitialPaymentTimeValEndDate: "",
      lnitialPaymentTimeVal: "", //付费统计时间筛选
      lnitialPaymentOptions: [],
      lnitialPaymentVal: "", //下拉框
      totalC: 0,
      pageC: 1, //页码
      pageSizeC: 10, //每页条数

      //ltv统计
      ltvPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      ltvTimeValStartDate: "",
      ltvTimeValEndDate: "",
      ltvTimeVal: "", //ltv统计时间筛选
      ltvOptions: [
        {
          value: "1",
          label: "官网",
        },
      ],
      ltvVal: "", //ltv统计渠道
      ltv: "",
      dateLtv: "",

      //付费统计详情列表
      listPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      listTimeVal: "", //付费统计列表时间筛选
      listOptions: [],
      listVal: "", //付费统计列表渠道

      //提现统计折线图
      withdrawalPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      withdrawalTimeValStartDate: "", //
      withdrawalTimeValEndDate: "", //
      withdrawalTimeVal: "", //提现统计折线图时间筛选
      withdrawalOptions: [],
      withdrawalVal: "", //提现统计折线图渠道

      //提现统计列表详情
      withdrawalListPickerOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      withdrawalTimeListValStartDate: "",
      withdrawalTimeListValEndDate: "",
      withdrawalTimeListVal: "", //提现统计列表详情时间筛选
      withdrawalListOptions: [],
      withdrawalListVal: "", //提现统计列表详情渠道
      withdrawalAmount: "", //提现金额
      withdrawalAmountRing: "", //提现金额环比
      withdrawalAmountWith: "", //提现金额同比
      withdrawerNum: "", //提现人数
      withdrawerNumRing: "", //提现人数环比
      withdrawerNumWith: "", //提现人数同比
      withdrawalRate: "", //提现率
      withdrawalRateRing: "", //提现率环比
      withdrawalRateWith: "", //提现率同比
      firstMentionedNum: "", //首提人数
      firstMentionedNumRing: "", //首提人数环比
      firstMentionedNumWith: "", //首提人数同比

      // index: 1,
      indexB: 1,
      indexA: 1,
      indexC: 1,
      tableDataA: [],
      tableDataB: [],

      //VIP
      totalVip: 0,
      pageVip: 1, //页码
      pageSizeVip: 10, //每页条数
      tableDataAVip: [],
      payPickerOptionsVip: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      payTimeValVipStartDate: "",
      payTimeValVipEndDate: "",
      payTimeValVip: "", //提现统计列表详情时间筛选
      payValVip: "",
      payOptionsVip: [],

      totalA: 0,
      pageA: 1, //页码
      pageSizeA: 10, //每页条数
      // totalB: 0,
      // pageB: 1, //页码
      // pageSizeB: 10, //每页条数
    };
  },
  methods: {
    // 提现统计 今日 当月 总计
    WithdrawalActive(num) {
      console.log(111);
      this.WithdrawalActiveA = num;
      const date = new Date();
      const dateYear = date.getFullYear(); //获取年
      const dateMonth = date.getMonth() + 1; //获取月份
      const dateDate = date.getDate(); //获取当日
      // console.log();
      let time = dateYear + "-" + dateMonth + "-" + dateDate; //当前日
      let timeMonth = dateYear + "-" + dateMonth + "-" + "1"; //当月开始
      if (num == 1) {
        chartWithdrawDetails({
          startTime: time,
          endTime: time,
          channel: "",
          type: 1,
        }).then((res) => {
          if (res.code == 0) {
            this.tableDataB = res.data.list;
            // this.totalB = res.data.total;
            this.withdrawalAmount = res.data.withdrawalAmount;
            this.withdrawalAmountRing = res.data.withdrawalAmountRing;
            this.withdrawalAmountWith = res.data.withdrawalAmountWith;
            this.withdrawerNum = res.data.withdrawerNum;
            this.withdrawerNumRing = res.data.withdrawerNumRing;
            this.withdrawerNumWith = res.data.withdrawerNumWith;
            this.withdrawalRate = res.data.withdrawalRate;
            this.withdrawalRateRing = res.data.withdrawalRateRing;
            this.withdrawalRateWith = res.data.withdrawalRateWith;
            this.firstMentionedNum = res.data.firstMentionedNum;
            this.firstMentionedNumRing = res.data.firstMentionedNumRing;
            this.firstMentionedNumWith = res.data.firstMentionedNumWith;
            this.loadingB = false;
          }
        });
      } else if (num == 2) {
        chartWithdrawDetails({
          startTime: timeMonth,
          endTime: time,
          channel: "",
          type: 1,
        }).then((res) => {
          if (res.code == 0) {
            this.tableDataB = res.data.list;
            // this.totalB = res.data.total;
            this.withdrawalAmount = res.data.withdrawalAmount;
            this.withdrawalAmountRing = res.data.withdrawalAmountRing;
            this.withdrawalAmountWith = res.data.withdrawalAmountWith;
            this.withdrawerNum = res.data.withdrawerNum;
            this.withdrawerNumRing = res.data.withdrawerNumRing;
            this.withdrawerNumWith = res.data.withdrawerNumWith;
            this.withdrawalRate = res.data.withdrawalRate;
            this.withdrawalRateRing = res.data.withdrawalRateRing;
            this.withdrawalRateWith = res.data.withdrawalRateWith;
            this.firstMentionedNum = res.data.firstMentionedNum;
            this.firstMentionedNumRing = res.data.firstMentionedNumRing;
            this.firstMentionedNumWith = res.data.firstMentionedNumWith;
            this.loadingB = false;
          }
        });
      } else if (num == 3) {
        this.chartWithdrawDetails();
      }
    },
    // 导出付费统计详情
    exportExcel() {
      chartRechargeStatisticsDetail({
        startTime: this.payTimeValStartDate,
        endTime: this.payTimeValEndDate,
        channel: this.payVal,
      }).then((res) => {
        if (res.code == 0) {
          if (res.data.list.length) {
            require.ensure([], () => {
              const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
              const tHeader = [
                "日期",
                "付费金额",
                "付费人数",
                "点击充值人数",
                "点击充值次数",
                "充值率",
                "ARPU",
                "ARPPU",
                "付费率",
              ]; // 上面设置Excel的表格第一行的标题
              const filterVal = [
                "date",
                "totalMoney",
                "rechargePersonNum",
                "clickRechargeUserNum",
                "clickRechargeNum",
                "rechargeTwoRate",
                "rechargeARPU",
                "rechargeARPPU",
                "rechargeRate",
              ]; // 上面的index、nickName、name是tableData里对象的属性key值
              const list = res.data.list; //把要导出的数据tableData存到list
              const data = this.formatJson(filterVal, list);
              export_json_to_excel(tHeader, data, "付费统计详情"); //最后一个是表名字
            });
          }
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    //导出VIP付费统计详情
    exportExcelVIP() {
      // chartRechargeStatisticsDetail({
      //   startTime: this.payTimeValStartDate,
      //   endTime: this.payTimeValEndDate,
      //   channel: this.payVal,
      // })
      chartRechargeStatisticsDetail({
        page: 1,
        pageSize: 1000,
        startTime: this.payTimeValVipStartDate,
        endTime: this.payTimeValVipEndDate,
        channel: this.payValVip,
        rechargeType: 2, //1.金币充值 2.vip充值
      }).then((res) => {
        if (res.code == 0) {
          if (res.data.list.length) {
            require.ensure([], () => {
              const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
              const tHeader = [
                "日期",
                "付费金额",
                "付费人数",
                "点击充值人数",
                "点击充值次数",
                "充值率",
                "付费率",
              ]; // 上面设置Excel的表格第一行的标题
              const filterVal = [
                "date",
                "totalMoney",
                "rechargePersonNum",
                "clickRechargeUserNum",
                "clickRechargeNum",
                "rechargeTwoRate",
                "rechargeRate",
              ]; // 上面的index、nickName、name是tableData里对象的属性key值
              const list = res.data.list; //把要导出的数据tableData存到list
              const data = this.formatJson(filterVal, list);
              export_json_to_excel(tHeader, data, "VIP付费统计详情"); //最后一个是表名字
            });
          }
        }
      });
    },
    // 导出首次付费
    exportExcelD() {
      chartRechargeUserFirstRechargeRetention({
        startTime: this.lnitialPaymentTimeValStartDate,
        endTime: this.lnitialPaymentTimeValEndDate,
        channel: this.lnitialPaymentVal,
        page: this.pageC,
        pageSize: this.pageSizeC,
      }).then((res) => {
        if (res.code == 0) {
          if (res.data.list.length) {
            require.ensure([], () => {
              const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
              const tHeader = [
                "日期",
                "当日",
                "次日",
                "3日",
                "4日",
                "5日",
                "6日",
                "7日",
                "15日",
                "30日",
                "30日后",
              ]; // 上面设置Excel的表格第一行的标题
              const filterVal = [
                "date",
                "r1",
                "r2",
                "r3",
                "r4",
                "r5",
                "r6",
                "r7",
                "r8",
                "r9",
                "r10",
              ]; // 上面的index、nickName、name是tableData里对象的属性key值
              const list = res.data.list; //把要导出的数据tableData存到list
              const data = this.formatJson(filterVal, list);
              export_json_to_excel(tHeader, data, "首次付费人数"); //最后一个是表名字
            });
          }
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    //导出提现统  计
    exportExcelB() {
      chartWithdrawLineChart({
        startTime: this.withdrawalTimeValStartDate,
        endTime: this.withdrawalTimeValEndDate,
        rechargeType: this.indexB,
      }).then((res) => {
        if (res.code == 0) {
          require.ensure([], () => {
            var array = [];
            for (var i = 0; i <= res.data.date.length; i++) {
              var arr = {};
              arr = {
                date: res.data.date[i],
                android: res.data.list.android[i],
                ios: res.data.list.ios[i],
              };
              array.push(arr);
            }
            const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
            const tHeader = ["日期", "android", "ios"]; // 上面设置Excel的表格第一行的标题
            const filterVal = ["date", "android", "ios"]; // 上面的index、nickName、name是tableData里对象的属性key值
            const list = array; //把要导出的数据tableData存到list
            const data = this.formatJson(filterVal, list);
            export_json_to_excel(tHeader, data, "提现统计"); //最后一个是表名字
          });
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    //导出提现统计详情
    exportExcelC() {
      chartWithdrawDetails({
        startTime: this.withdrawalTimeListValStartDate,
        endTime: this.withdrawalTimeListValEndDate,
        channel: this.withdrawalListVal,
      }).then((res) => {
        if (res.code == 0) {
          if (res.data.list.length) {
            require.ensure([], () => {
              const { export_json_to_excel } = require("@/excel/Export2Excel"); //注意这个Export2Excel路径
              const tHeader = [
                "日期",
                "总金额(宝石)",
                "人数",
                "次数",
                "提现率",
              ]; // 上面设置Excel的表格第一行的标题
              const filterVal = [
                "date",
                "totalMoney",
                "withdrawPersonNum",
                "withdrawCount",
                "withdrawRate",
              ]; // 上面的index、nickName、name是tableData里对象的属性key值
              const list = res.data.list; //把要导出的数据tableData存到list
              const data = this.formatJson(filterVal, list);
              export_json_to_excel(tHeader, data, "统计详情"); //最后一个是表名字
            });
          }
        }
      });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    //首次付费人数
    chartRechargeUserFirstRechargeRetention() {
      this.lnitialPaymentLoading = true;
      chartRechargeUserFirstRechargeRetention({
        startTime: "",
        endTime: "",
        channel: "",
        page: this.pageC,
        pageSize: this.pageSizeC,
      }).then((res) => {
        if (res.code == 0) {
          this.lnitialPaymentTableData = res.data.list;
          this.totalC = res.data.total;
          this.lnitialPaymentLoading = false;
        }
      });
    },
    //首次付费搜索
    lnitialPaymentBtn() {
      this.lnitialPaymentLoading = true;

      chartRechargeUserFirstRechargeRetention({
        startTime: this.lnitialPaymentTimeValStartDate,
        endTime: this.lnitialPaymentTimeValEndDate,
        channel: this.lnitialPaymentVal,
        page: this.pageC,
        pageSize: this.pageSizeC,
      }).then((res) => {
        if (res.code == 0) {
          this.lnitialPaymentTableData = res.data.list;
          this.totalC = res.data.total;
          this.lnitialPaymentLoading = false;
        }
      });
    },
    //首次付费人数时间
    focusF(time) {
      if (!this.lnitialPaymentTimeVal) {
        this.lnitialPaymentTimeVal = [];
      }
      this.lnitialPaymentTimeValStartDate = this.lnitialPaymentTimeVal[0];
      this.lnitialPaymentTimeValEndDate = this.lnitialPaymentTimeVal[1];
    },
    //首次付费分页
    getListc() {
      this.lnitialPaymentLoading = true;

      chartRechargeUserFirstRechargeRetention({
        startTime: this.lnitialPaymentTimeValStartDate,
        endTime: this.lnitialPaymentTimeValEndDate,
        channel: this.lnitialPaymentVal,
        page: this.pageC,
        pageSize: this.pageSizeC,
      }).then((res) => {
        if (res.code == 0) {
          this.lnitialPaymentTableData = res.data.list;
          this.totalC = res.data.total;
          this.lnitialPaymentLoading = false;
        }
      });
    },
    //流水分析-付费统计卡片
    // chartPaymentStatisticsCard() {
    //   chartPaymentStatisticsCard({
    //     startTime: "",
    //     endTime: "",
    //     channel: "",
    //   }).then((res) => {
    //     if (res.code == 0) {
    //       this.tableDataA = res.data.list;
    //       this.totalA = res.data.total;
    //       this.paymentAmount = res.data.paymentAmount;
    //       this.paymentAmountRing = res.data.paymentAmountRing;
    //       this.paymentAmountWith = res.data.paymentAmountWith;
    //       this.payer = res.data.payer;
    //       this.payerRing = res.data.payerRing;
    //       this.payerWith = res.data.payerWith;
    //       this.firstCharge = res.data.firstCharge;
    //       this.firstChargeRing = res.data.firstChargeRing;
    //       this.firstChargeWith = res.data.firstChargeWith;
    //       this.rate = res.data.rate;
    //       this.rateRing = res.data.rateRing;
    //       this.rateWith = res.data.rateWith;
    //     }
    //   });
    // },
    //付费统计卡片搜索
    // chartPaymentStatisticsCardBtn() {
    //   chartPaymentStatisticsCard({
    //     startTime: this.payTimeValStartDate,
    //     endTime: this.payTimeValEndDate,
    //     channel: this.payVal,
    //   }).then((res) => {
    //     if (res.code == 0) {
    //       this.tableDataA = res.data.list;
    //       this.totalA = res.data.total;
    //       // this.paymentAmount = res.data.paymentAmount;
    //       // this.paymentAmountRing = res.data.paymentAmountRing;
    //       // this.paymentAmountWith = res.data.paymentAmountWith;
    //       // this.payer = res.data.payer;
    //       // this.payerRing = res.data.payerRing;
    //       // this.payerWith = res.data.payerWith;
    //       // this.firstCharge = res.data.firstCharge;
    //       // this.firstChargeRing = res.data.firstChargeRing;
    //       // this.firstChargeWith = res.data.firstChargeWith;
    //       // this.rate = res.data.rate;
    //       // this.rateRing = res.data.rateRing;
    //       // this.rateWith = res.data.rateWith;
    //     }
    //   });
    // },
    //  付费统计卡片
    chartRechargeStatistics() {
      chartRechargeStatistics({
        rechargeType: 1,
      }).then((res) => {
        if (res.code == 0) {
          this.paymentAmount = res.data.paymentAmount; //付费金额
          this.paymentAmountRing = res.data.paymentAmountRing; //付费金额环比
          this.paymentAmountWith = res.data.paymentAmountWith; //付费金额同比
          this.payer = res.data.payer; //付费人数
          this.payerRing = res.data.payerRing; //付费人数环比
          this.payerWith = res.data.payerWith; //付费人数同比
          this.firstCharge = res.data.firstCharge; //首充人数
          this.firstChargeRing = res.data.firstChargeRing; //首充人数环比
          this.firstChargeWith = res.data.firstChargeWith; //首充人数同比
          this.rate = res.data.rate; //付费率(%)
          this.rateRing = res.data.rateRing; //付费率(%)环比
          this.rateWith = res.data.rateWith; //付费率(%)同比

          this.addRechargeMoney = res.data.addRechargeMoney; //新增付费
          this.addRechargeMoneyRing = res.data.addRechargeMoneyRing; //
          this.addRechargeMoneyWith = res.data.addRechargeMoneyWith; //
          this.addRechargeUserNum = res.data.addRechargeUserNum; //新增付费人数
          this.addRechargeUserNumRing = res.data.addRechargeUserNumRing; //
          this.addRechargeUserNumWith = res.data.addRechargeUserNumWith; //
          this.clickRechargeUserNum = res.data.clickRechargeUserNum; //点击充值人数
          this.clickRechargeUserNumRing = res.data.clickRechargeUserNumRing; //
          this.clickRechargeUserNumWith = res.data.clickRechargeUserNumWith; //
          this.clickRechargeNum = res.data.clickRechargeNum; //点击充值次数
          this.clickRechargeNumRing = res.data.clickRechargeNumRing; //
          this.clickRechargeNumWith = res.data.clickRechargeNumWith; //
          this.rechargeTwoRate = res.data.rechargeTwoRate; //充值率
          this.rechargeTwoRateRing = res.data.rechargeTwoRateRing; //
          this.rechargeTwoRateWith = res.data.rechargeTwoRateWith; //
        }
      });

      chartRechargeStatistics({
        rechargeType: 2,
      }).then((res) => {
        if (res.code == 0) {
          this.paymentAmountB = res.data.paymentAmount;
          this.paymentAmountRingB = res.data.paymentAmountRing;
          this.paymentAmountWithB = res.data.paymentAmountWith;
          this.payerB = res.data.payer;
          this.payerRingB = res.data.payerRing;
          this.payerWithB = res.data.payerWith;
          this.firstChargeB = res.data.firstCharge;
          this.firstChargeRingB = res.data.firstChargeRing;
          this.firstChargeWithB = res.data.firstChargeWith;
          this.rateB = res.data.rate;
          this.rateRingB = res.data.rateRing;
          this.rateWithB = res.data.rateWith;

          this.addRechargeMoneyB = res.data.addRechargeMoney; //新增付费
          this.addRechargeMoneyRingB = res.data.addRechargeMoneyRing; //
          this.addRechargeMoneyWithB = res.data.addRechargeMoneyWith; //
          this.addRechargeUserNumB = res.data.addRechargeUserNum; //新增付费人数
          this.addRechargeUserNumRingB = res.data.addRechargeUserNumRing; //
          this.addRechargeUserNumWithB = res.data.addRechargeUserNumWith; //
          this.clickRechargeUserNumB = res.data.clickRechargeUserNum; //点击充值人数
          this.clickRechargeUserNumRingB = res.data.clickRechargeUserNumRing; //
          this.clickRechargeUserNumWithB = res.data.clickRechargeUserNumWith; //
          this.clickRechargeNumB = res.data.clickRechargeNum; //点击充值次数
          this.clickRechargeNumRingB = res.data.clickRechargeNumRing; //
          this.clickRechargeNumWithB = res.data.clickRechargeNumWith; //
          this.rechargeTwoRateB = res.data.rechargeTwoRate; //充值率
          this.rechargeTwoRateRingB = res.data.rechargeTwoRateRing; //
          this.rechargeTwoRateWithB = res.data.rechargeTwoRateWith; //
        }
      });
    },
    // 付费统计列表
    chartRechargeStatisticsDetail() {
      this.loadingA = true;
      chartRechargeStatisticsDetail({
        startTime: "",
        endTime: "",
        channel: "",
        page: this.pageA,
        pageSize: this.pageSizeA,
        rechargeType: 1, //1.金币充值 2.vip充值
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataA = res.data.list;
          this.totalA = res.data.total;
          this.loadingA = false;
        }
      });
    },
    // 搜索付费统计列表
    chartPaymentStatisticsCardBtn() {
      this.loadingA = true;

      chartRechargeStatisticsDetail({
        startTime: this.payTimeValStartDate,
        endTime: this.payTimeValEndDate,
        channel: this.payVal,
        rechargeType: 1, //1.金币充值 2.vip充值
        page: this.pageA,
        pageSize: this.pageSizeA,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataA = res.data.list;
          this.totalA = res.data.total;
          this.loadingA = false;
        }
      });
    },
    // VIP列表
    chartRechargeStatisticsDetailVip() {
      this.loadingAVip = true;
      chartRechargeStatisticsDetail({
        startTime: "",
        endTime: "",
        channel: "",
        page: this.pageVip,
        pageSize: this.pageSizeVip,
        rechargeType: 2, //1.金币充值 2.vip充值
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataAVip = res.data.list;
          this.totalVip = res.data.total;
          this.loadingAVip = false;
        }
      });
    },
    // 搜索VIP列表
    chartPaymentStatisticsCardVipBtn() {
      this.loadingAVip = true;

      chartRechargeStatisticsDetail({
        page: this.pageVip,
        pageSize: this.pageSizeVip,
        startTime: this.payTimeValVipStartDate,
        endTime: this.payTimeValVipEndDate,
        channel: this.payValVip,
        rechargeType: 2, //1.金币充值 2.vip充值
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataAVip = res.data.list;
          this.totalVip = res.data.total;
          this.loadingAVip = false;
        }
      });
    },
    //VIP列表分页
    getListVip() {
      this.loadingAVip = true;

      chartRechargeStatisticsDetail({
        page: this.pageVip,
        pageSize: this.pageSizeVip,
        startTime: this.payTimeValVipStartDate,
        endTime: this.payTimeValVipEndDate,
        channel: this.payValVip,
        rechargeType: 2, //1.金币充值 2.vip充值
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataAVip = res.data.list;
          this.totalVip = res.data.total;
          this.loadingAVip = false;
        }
      });
    },
    //付费统计卡片时间
    focusA(time) {
      if (!this.payTimeVal) {
        this.payTimeVal = [];
      }
      this.payTimeValStartDate = this.payTimeVal[0];
      this.payTimeValEndDate = this.payTimeVal[1];
    },
    //VIP
    focusVip(time) {
      if (!this.payTimeValVip) {
        this.payTimeValVip = [];
      }
      this.payTimeValVipStartDate = this.payTimeValVip[0];
      this.payTimeValVipEndDate = this.payTimeValVip[1];
    },
    focusC(time) {
      if (!this.listTimeVal) {
        this.listTimeVal = [];
      }
      this.payTimeValStartDate = this.listTimeVal[0];
      this.payTimeValEndDate = this.listTimeVal[1];
    },
    //分页付费统计列表
    getListA() {
      this.loadingA = true;

      chartRechargeStatisticsDetail({
        startTime: this.payTimeValStartDate,
        endTime: this.payTimeValEndDate,
        channel: this.payVal,
        rechargeType: 1, //1.金币充值 2.vip充值
        page: this.pageA,
        pageSize: this.pageSizeA,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataA = res.data.list;
          this.totalA = res.data.total;
          this.loadingA = false;
        }
      });
    },
    //LTV
    chartPaymentStatisticsLtv() {
      chartPaymentStatisticsLtv({
        startTime: "",
        endTime: "",
        channel: "",
      }).then((res) => {
        if (res.code == 0) {
          this.ltv = res.data.ltv;
          this.dateLtv = res.data.date;
        }
      });
    },
    //LTV搜索
    chartPaymentStatisticsLtvBtn() {
      chartPaymentStatisticsLtv({
        startTime: this.ltvTimeValStartDate,
        endTime: this.ltvTimeValEndDate,
        channel: this.ltvVal,
      }).then((res) => {
        if (res.code == 0) {
          this.ltv = res.data.ltv;
          this.dateLtv = res.data.date;
        }
      });
    },
    //LTV时间
    focusB(time) {
      if (!this.ltvTimeVal) {
        this.ltvTimeVal = [];
      }
      this.ltvTimeValStartDate = this.ltvTimeVal[0];
      this.ltvTimeValEndDate = this.ltvTimeVal[1];
    },
    //提现统计详情
    chartWithdrawDetails() {
      this.loadingB = true;
      chartWithdrawDetails({
        startTime: "",
        endTime: "",
        channel: "",
        type: 1,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataB = res.data.list;
          // this.totalB = res.data.total;
          this.withdrawalAmount = res.data.withdrawalAmount;
          this.withdrawalAmountRing = res.data.withdrawalAmountRing;
          this.withdrawalAmountWith = res.data.withdrawalAmountWith;
          this.withdrawerNum = res.data.withdrawerNum;
          this.withdrawerNumRing = res.data.withdrawerNumRing;
          this.withdrawerNumWith = res.data.withdrawerNumWith;
          this.withdrawalRate = res.data.withdrawalRate;
          this.withdrawalRateRing = res.data.withdrawalRateRing;
          this.withdrawalRateWith = res.data.withdrawalRateWith;
          this.firstMentionedNum = res.data.firstMentionedNum;
          this.firstMentionedNumRing = res.data.firstMentionedNumRing;
          this.firstMentionedNumWith = res.data.firstMentionedNumWith;
          this.loadingB = false;
        }
      });
    },
    //搜索
    chartWithdrawDetailsBtn() {
      this.loadingB = true;

      chartWithdrawDetails({
        startTime: this.withdrawalTimeListValStartDate,
        endTime: this.withdrawalTimeListValEndDate,
        channel: this.withdrawalListVal,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataB = res.data.list;
          // this.totalB = res.data.total;
          this.withdrawalAmount = res.data.withdrawalAmount;
          this.withdrawalAmountRing = res.data.withdrawalAmountRing;
          this.withdrawalAmountWith = res.data.withdrawalAmountWith;
          this.withdrawerNum = res.data.withdrawerNum;
          this.withdrawerNumRing = res.data.withdrawerNumRing;
          this.withdrawerNumWith = res.data.withdrawerNumWith;
          this.withdrawalRate = res.data.withdrawalRate;
          this.withdrawalRateRing = res.data.withdrawalRateRing;
          this.withdrawalRateWith = res.data.withdrawalRateWith;
          this.firstMentionedNum = res.data.firstMentionedNum;
          this.firstMentionedNumRing = res.data.firstMentionedNumRing;
          this.firstMentionedNumWith = res.data.firstMentionedNumWith;
          this.loadingB = false;
        }
      });
    },
    //分页
    getListB() {
      this.loadingB = true;

      chartWithdrawDetails({
        startTime: this.withdrawalTimeListValStartDate,
        endTime: this.withdrawalTimeListValEndDate,
        channel: this.withdrawalListVal,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataB = res.data.list;
          // this.totalB = res.data.total;
          this.withdrawalAmount = res.data.withdrawalAmount;
          this.withdrawalAmountRing = res.data.withdrawalAmountRing;
          this.withdrawalAmountWith = res.data.withdrawalAmountWith;
          this.withdrawerNum = res.data.withdrawerNum;
          this.withdrawerNumRing = res.data.withdrawerNumRing;
          this.withdrawerNumWith = res.data.withdrawerNumWith;
          this.withdrawalRate = res.data.withdrawalRate;
          this.withdrawalRateRing = res.data.withdrawalRateRing;
          this.withdrawalRateWith = res.data.withdrawalRateWith;
          this.firstMentionedNum = res.data.firstMentionedNum;
          this.firstMentionedNumRing = res.data.firstMentionedNumRing;
          this.firstMentionedNumWith = res.data.firstMentionedNumWith;
          this.loadingB = false;
        }
      });
    },
    //提现统计详情时间
    focusE(time) {
      if (!this.withdrawalTimeListVal) {
        this.withdrawalTimeListVal = [];
      }
      this.withdrawalTimeListValStartDate = this.withdrawalTimeListVal[0];
      this.withdrawalTimeListValEndDate = this.withdrawalTimeListVal[1];
    },

    //提现统计折线图
    chartWithdrawLineChart() {
      chartWithdrawLineChart({
        startTime: "",
        endTime: "",
        withdrawType: this.indexB, //提现类型 提现率/提现金额/提现人数
      }).then((res) => {
        if (res.code == 0) {
          var formatter = "{b0}"; //展示百分比
          var j = 0;
          for (var k = 0; k < 2; k++) {
            //折线数不确定  假设有五条
            formatter += "<br/>{a" + j + "}: {c" + j + "}%";
            j++;
          }

          // 基于准备好的dom，初始化echarts实例
          let myChartB = this.$echarts.init(
            document.getElementById("myChartB")
          );
          // 绘制图表
          myChartB.setOption({
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
              formatter: formatter, //展示百分比
            },
            legend: {
              data: ["IOS", "Android"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.date,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "IOS",
                type: "line",
                stack: "总量1",
                data: res.data.list.ios,
              },
              {
                name: "Android",
                type: "line",
                stack: "总量",
                data: res.data.list.android,
              },
            ],
          });
        }
      });
    },
    //搜索
    chartWithdrawLineChartBtn() {
      chartWithdrawLineChart({
        startTime: this.withdrawalTimeValStartDate,
        endTime: this.withdrawalTimeValEndDate,
        rechargeType: this.indexB,
      }).then((res) => {
        if (res.code == 0) {
          // 基于准备好的dom，初始化echarts实例
          var formatter = "{b0}"; //展示百分比
          var j = 0;
          for (var k = 0; k < 2; k++) {
            //折线数不确定  假设有五条
            formatter += "<br/>{a" + j + "}: {c" + j + "}%";
            j++;
          }
          let myChartB = this.$echarts.init(
            document.getElementById("myChartB")
          );
          // 绘制图表
          myChartB.setOption({
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
            },
            legend: {
              data: ["IOS", "Android"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.date,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "IOS",
                type: "line",
                stack: "总量1",
                data: res.data.list.ios,
              },
              {
                name: "Android",
                type: "line",
                stack: "总量",
                data: res.data.list.android,
              },
            ],
          });
        }
      });
    },
    //折线图时间
    focusD(time) {
      if (!this.withdrawalTimeVal) {
        this.withdrawalTimeVal = [];
      }
      this.withdrawalTimeValStartDate = this.withdrawalTimeVal[0];
      this.withdrawalTimeValEndDate = this.withdrawalTimeVal[1];
    },
    //金币付费统计 今日
    activeAStatusA() {
      this.indexA = 1;
      chartRechargeStatistics({
        type: this.indexA,
        rechargeType: 1,
      }).then((res) => {
        if (res.code == 0) {
          this.paymentAmount = res.data.paymentAmount;
          this.paymentAmountRing = res.data.paymentAmountRing;
          this.paymentAmountWith = res.data.paymentAmountWith;
          this.payer = res.data.payer;
          this.payerRing = res.data.payerRing;
          this.payerWith = res.data.payerWith;
          this.firstCharge = res.data.firstCharge;
          this.firstChargeRing = res.data.firstChargeRing;
          this.firstChargeWith = res.data.firstChargeWith;
          this.rate = res.data.rate;
          this.rateRing = res.data.rateRing;
          this.rateWith = res.data.rateWith;

          this.addRechargeMoney = res.data.addRechargeMoney; //新增付费
          this.addRechargeMoneyRing = res.data.addRechargeMoneyRing; //
          this.addRechargeMoneyWith = res.data.addRechargeMoneyWith; //
          this.addRechargeUserNum = res.data.addRechargeUserNum; //新增付费人数
          this.addRechargeUserNumRing = res.data.addRechargeUserNumRing; //
          this.addRechargeUserNumWith = res.data.addRechargeUserNumWith; //
          this.clickRechargeUserNum = res.data.clickRechargeUserNum; //点击充值人数
          this.clickRechargeUserNumRing = res.data.clickRechargeUserNumRing; //
          this.clickRechargeUserNumWith = res.data.clickRechargeUserNumWith; //
          this.clickRechargeNum = res.data.clickRechargeNum; //点击充值次数
          this.clickRechargeNumRing = res.data.clickRechargeNumRing; //
          this.clickRechargeNumWith = res.data.clickRechargeNumWith; //
          this.rechargeTwoRate = res.data.rechargeTwoRate; //充值率
          this.rechargeTwoRateRing = res.data.rechargeTwoRateRing; //
          this.rechargeTwoRateWith = res.data.rechargeTwoRateWith; //
        }
      });
    },
    //金币付费统计 总计
    activeAStatusB() {
      this.indexA = 2;
      chartRechargeStatistics({
        type: this.indexA,
        rechargeType: 1,
      }).then((res) => {
        if (res.code == 0) {
          this.paymentAmount = res.data.paymentAmount;
          this.paymentAmountRing = res.data.paymentAmountRing;
          this.paymentAmountWith = res.data.paymentAmountWith;
          this.payer = res.data.payer;
          this.payerRing = res.data.payerRing;
          this.payerWith = res.data.payerWith;
          this.firstCharge = res.data.firstCharge;
          this.firstChargeRing = res.data.firstChargeRing;
          this.firstChargeWith = res.data.firstChargeWith;
          this.rate = res.data.rate;
          this.rateRing = res.data.rateRing;
          this.rateWith = res.data.rateWith;

          this.addRechargeMoney = res.data.addRechargeMoney; //新增付费
          this.addRechargeMoneyRing = res.data.addRechargeMoneyRing; //
          this.addRechargeMoneyWith = res.data.addRechargeMoneyWith; //
          this.addRechargeUserNum = res.data.addRechargeUserNum; //新增付费人数
          this.addRechargeUserNumRing = res.data.addRechargeUserNumRing; //
          this.addRechargeUserNumWith = res.data.addRechargeUserNumWith; //
          this.clickRechargeUserNum = res.data.clickRechargeUserNum; //点击充值人数
          this.clickRechargeUserNumRing = res.data.clickRechargeUserNumRing; //
          this.clickRechargeUserNumWith = res.data.clickRechargeUserNumWith; //
          this.clickRechargeNum = res.data.clickRechargeNum; //点击充值次数
          this.clickRechargeNumRing = res.data.clickRechargeNumRing; //
          this.clickRechargeNumWith = res.data.clickRechargeNumWith; //
          this.rechargeTwoRate = res.data.rechargeTwoRate; //充值率
          this.rechargeTwoRateRing = res.data.rechargeTwoRateRing; //
          this.rechargeTwoRateWith = res.data.rechargeTwoRateWith; //
        }
      });
    },
    //VIP的今日
    activeBStatusA() {
      this.indexC = 1;
      chartRechargeStatistics({
        type: this.indexC,
        rechargeType: 2,
      }).then((res) => {
        if (res.code == 0) {
          this.paymentAmountB = res.data.paymentAmount;
          this.paymentAmountRingB = res.data.paymentAmountRing;
          this.paymentAmountWithB = res.data.paymentAmountWith;
          this.payerB = res.data.payer;
          this.payerRingB = res.data.payerRing;
          this.payerWithB = res.data.payerWith;
          this.firstChargeB = res.data.firstCharge;
          this.firstChargeRingB = res.data.firstChargeRing;
          this.firstChargeWithB = res.data.firstChargeWith;
          this.rateB = res.data.rate;
          this.rateRingB = res.data.rateRing;
          this.rateWithB = res.data.rateWith;

          this.addRechargeMoneyB = res.data.addRechargeMoney; //新增付费
          this.addRechargeMoneyRingB = res.data.addRechargeMoneyRing; //
          this.addRechargeMoneyWithB = res.data.addRechargeMoneyWith; //
          this.addRechargeUserNumB = res.data.addRechargeUserNum; //新增付费人数
          this.addRechargeUserNumRingB = res.data.addRechargeUserNumRing; //
          this.addRechargeUserNumWithB = res.data.addRechargeUserNumWith; //
          this.clickRechargeUserNumB = res.data.clickRechargeUserNum; //点击充值人数
          this.clickRechargeUserNumRingB = res.data.clickRechargeUserNumRing; //
          this.clickRechargeUserNumWithB = res.data.clickRechargeUserNumWith; //
          this.clickRechargeNumB = res.data.clickRechargeNum; //点击充值次数
          this.clickRechargeNumRingB = res.data.clickRechargeNumRing; //
          this.clickRechargeNumWithB = res.data.clickRechargeNumWith; //
          this.rechargeTwoRateB = res.data.rechargeTwoRate; //充值率
          this.rechargeTwoRateRingB = res.data.rechargeTwoRateRing; //
          this.rechargeTwoRateWithB = res.data.rechargeTwoRateWith; //
        }
      });
    },
    //VIP的总计
    activeBStatusB() {
      this.indexC = 2;
      chartRechargeStatistics({
        type: this.indexC,
        rechargeType: 2,
      }).then((res) => {
        if (res.code == 0) {
          this.paymentAmountB = res.data.paymentAmount;
          this.paymentAmountRingB = res.data.paymentAmountRing;
          this.paymentAmountWithB = res.data.paymentAmountWith;
          this.payerB = res.data.payer;
          this.payerRingB = res.data.payerRing;
          this.payerWithB = res.data.payerWith;
          this.firstChargeB = res.data.firstCharge;
          this.firstChargeRingB = res.data.firstChargeRing;
          this.firstChargeWithB = res.data.firstChargeWith;
          this.rateB = res.data.rate;
          this.rateRingB = res.data.rateRing;
          this.rateWithB = res.data.rateWith;

          this.addRechargeMoneyB = res.data.addRechargeMoney; //新增付费
          this.addRechargeMoneyRingB = res.data.addRechargeMoneyRing; //
          this.addRechargeMoneyWithB = res.data.addRechargeMoneyWith; //
          this.addRechargeUserNumB = res.data.addRechargeUserNum; //新增付费人数
          this.addRechargeUserNumRingB = res.data.addRechargeUserNumRing; //
          this.addRechargeUserNumWithB = res.data.addRechargeUserNumWith; //
          this.clickRechargeUserNumB = res.data.clickRechargeUserNum; //点击充值人数
          this.clickRechargeUserNumRingB = res.data.clickRechargeUserNumRing; //
          this.clickRechargeUserNumWithB = res.data.clickRechargeUserNumWith; //
          this.clickRechargeNumB = res.data.clickRechargeNum; //点击充值次数
          this.clickRechargeNumRingB = res.data.clickRechargeNumRing; //
          this.clickRechargeNumWithB = res.data.clickRechargeNumWith; //
          this.rechargeTwoRateB = res.data.rechargeTwoRate; //充值率
          this.rechargeTwoRateRingB = res.data.rechargeTwoRateRing; //
          this.rechargeTwoRateWithB = res.data.rechargeTwoRateWith; //
        }
      });
    },
    // activeStatusA() {
    //   this.index = 1;
    // },
    // activeStatusB() {
    //   this.index = 2;
    // },
    // activeStatusC() {
    //   this.index = 3;
    // },
    //提现率
    activeStatusD() {
      this.indexB = 1;
      chartWithdrawLineChart({
        startTime: this.withdrawalTimeValStartDate,
        endTime: this.withdrawalTimeValEndDate,
        rechargeType: this.indexB,
      }).then((res) => {
        if (res.code == 0) {
          var formatter = "{b0}"; //展示百分比
          var j = 0;
          for (var k = 0; k < 2; k++) {
            formatter += "<br/>{a" + j + "}: {c" + j + "}%";
            j++;
          }
          // 基于准备好的dom，初始化echarts实例
          let myChartB = this.$echarts.init(
            document.getElementById("myChartB")
          );
          // 绘制图表
          myChartB.setOption({
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
              formatter: formatter, //展示百分比
            },
            legend: {
              data: ["IOS", "Android"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.date,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "IOS",
                type: "line",
                stack: "总量1",
                data: res.data.list.ios,
              },
              {
                name: "Android",
                type: "line",
                stack: "总量",
                data: res.data.list.android,
              },
            ],
          });
        }
      });
    },
    //提现金额
    activeStatusE() {
      this.indexB = 2;
      chartWithdrawLineChart({
        startTime: this.withdrawalTimeValStartDate,
        endTime: this.withdrawalTimeValEndDate,
        rechargeType: this.indexB,
      }).then((res) => {
        if (res.code == 0) {
          // 基于准备好的dom，初始化echarts实例
          let myChartB = this.$echarts.init(
            document.getElementById("myChartB")
          );
          // 绘制图表
          myChartB.setOption({
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
              formatter: "{b0}<br/>{a0}: {c0}<br />{a1}: {c1}",
            },
            legend: {
              data: ["IOS", "Android"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.date,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "IOS",
                type: "line",
                stack: "总量",
                data: res.data.list.ios,
              },
              {
                name: "Android",
                type: "line",
                stack: "总量1",
                data: res.data.list.android,
              },
            ],
          });
        }
      });
    },
    //提现人数
    activeStatusF() {
      this.indexB = 3;
      chartWithdrawLineChart({
        startTime: this.withdrawalTimeValStartDate,
        endTime: this.withdrawalTimeValEndDate,
        rechargeType: this.indexB,
      }).then((res) => {
        if (res.code == 0) {
          // 基于准备好的dom，初始化echarts实例
          let myChartB = this.$echarts.init(
            document.getElementById("myChartB")
          );
          // 绘制图表
          myChartB.setOption({
            title: {
              text: "",
            },
            tooltip: {
              trigger: "axis",
              formatter: "{b0}<br/>{a0}: {c0}<br />{a1}: {c1}",
            },
            legend: {
              data: ["IOS", "Android"],
            },
            grid: {
              left: "3%",
              right: "4%",
              bottom: "3%",
              containLabel: true,
            },
            xAxis: {
              type: "category",
              boundaryGap: false,
              data: res.data.date,
            },
            yAxis: {
              type: "value",
            },
            series: [
              {
                name: "IOS",
                type: "line",
                stack: "总量",
                data: res.data.list.ios,
              },
              {
                name: "Android",
                type: "line",
                stack: "总量1",
                data: res.data.list.android,
              },
            ],
          });
        }
      });
    },
    //渠道列表
    channelList() {
      channelList({}).then((res) => {
        if (res.code == 0) {
          this.payOptions = res.data;
          this.ltvOptions = res.data;
          this.withdrawalOptions = res.data;
          this.withdrawalListOptions = res.data;
          this.lnitialPaymentOptions = res.data;
          this.payOptionsVip = res.data;
        }
      });
    },
  },
  filters: {
    numFilter(value) {
      // 截取当前数据到小数点后三位
      let tempVal = parseFloat(value).toFixed(3);
      let realVal = tempVal.substring(0, tempVal.length - 1);
      if (realVal < 0) {
        realVal = realVal.slice(1);
      }
      return realVal + "%";
    },
  },
  mounted() {},
  created() {
    this.chartWithdrawLineChart();
    // this.chartRechargeDetail();
    //付费统计卡片
    this.chartRechargeStatistics();
    // this.chartPaymentStatisticsCard();
    //ltv
    this.chartPaymentStatisticsLtv();
    //提现详情
    this.chartRechargeStatisticsDetail();
    this.chartWithdrawDetails();
    this.channelList();

    //首次付费
    this.chartRechargeUserFirstRechargeRetention();

    // VIP
    this.chartRechargeStatisticsDetailVip();
  },
};
</script>

<style lang="less" scoped>
.userAnalysis {
  margin: 30px;
  height: 100%;

  .userStatisticsBox {
    margin-bottom: 30px;
    .userStatisticsHead {
      display: flex;
      justify-content: space-between;
      .p {
        display: flex;
        p {
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
        }
        .activeA {
          background-color: #0079fe;
          color: #fff;
          border-radius: 10px;
        }
      }
    }
    h3 {
      font-size: 30px;
      margin: 0px;
    }
    .todaySpan {
      margin-top: 10px;
      display: inline-block;
    }
    .userStatisticsItem {
      margin-top: 20px;
      display: flex;
      justify-content: space-between;
      margin-bottom: 40px;
      .one {
        width: 300px;
        h4 {
          margin: 0px;
          font-size: 26px;
          margin-bottom: 10px;
        }
        .p {
          margin: 20px 0px;
          font-size: 24px;
        }
        p {
          margin: 0px;
        }
        div {
          display: flex;
          justify-content: space-between;
        }
      }
    }
    .searchBox {
      display: flex;
      justify-content: space-between;
      margin: 40px 0px;
      .el-input__inner,
      .el-range-editor.el-input__inner,
      .el-date-editor .el-range-input {
        margin-left: 10px;
      }
      .p2 {
        display: flex;
        p {
          width: 70px;
          height: 40px;
          line-height: 40px;
          text-align: center;
        }
      }
      .p {
        display: flex;
        p {
          width: 100px;
          height: 40px;
          line-height: 40px;
          text-align: center;
        }
      }
      .active {
        background-color: #0079fe;
        color: #fff;
        border-radius: 10px;
      }
      .activeB {
        background-color: #0079fe;
        color: #fff;
        border-radius: 10px;
      }
      .activeC {
        background-color: #0079fe;
        color: #fff;
        border-radius: 10px;
      }
      .el-button {
        margin-left: 20px;
      }
    }
    #myChart {
      margin-bottom: 30px;
    }
    .el-button {
      margin-left: 20px;
    }
    .el-table {
      margin-top: 30px;
    }
    .hilden {
      visibility: hidden;
    }
  }
}
</style>